import { Image, View } from '@hips/taro-ui'
import AccountIcon from 'assets/icons/account.png'
import PhoneIcon from 'assets/icons/phone.svg'
import EmailIcon from 'assets/icons/email.svg'
import PositionIcon from 'assets/icons/position.png'
import Styles from './user-info-detail.module.less'
export default {
  name: 'UserInfoDetail',
  props: {
    userDetail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      title: '个人信息'
    }
  },
  computed: {
    userDetailList() {
      const { phone, loginName, email } = this.userDetail
      const Account = {
        icon: AccountIcon,
        title: '账号',
        value: loginName
      }
      const Phone = {
        icon: PhoneIcon,
        title: '电话',
        value: phone
      }
      const Email = {
        icon: EmailIcon,
        title: '邮箱',
        value: email
      }
      // const Position = {
      //   icon: PositionIcon,
      //   title: '职位',
      //   value: currentRoleName
      // }
      return [Account, Phone, Email]
    }
  },
  render() {
    return (
      <View class={Styles['user-info-detail']}>
        <View class={Styles['user-info-detail-title']}>{this.title}</View>
        <View class={Styles['user-info-detail-box']}>
          {this.userDetailList.map((item, index) => {
            return (
              <View class={Styles['user-info-detail-box-cell']}>
                <View class={Styles['user-info-detail-box-cell-left']}>
                  <Image
                    class={Styles['user-info-detail-box-cell-left-icon']}
                    src={item.icon}
                  ></Image>
                  <View class={Styles['user-info-detail-box-cell-left-title']}>
                    {item.title}
                  </View>
                </View>
                <View class={Styles['user-info-detail-box-cell-value']}>
                  {item.value}
                </View>
              </View>
            )
          })}
        </View>
      </View>
    )
  }
}
